<template>
	<view class="common_title_component flex-cen" :style="{ padding: boxPadding }">
		<view class="title_text" :class="{ select_style: selectStatus }">
			<view class="one-hide" :style="{ color: commonTitleColor }">{{ commonTitle }}</view>
		</view>
		<view class="more_box flex-cen" v-if="moreTitle" @click="tapMore()">
			<text class="more_title" :style="{ color: moreTitleColor }">{{ moreTitle }}</text>
			<image src="../../static/components/index_more_logo.svg"  v-if="showMoreIcon"/>
		</view>
		<slot v-else></slot>
	</view>
</template>

<script>
import util from "../../public/util"
export default {
	props: {
		commonTitle: {
			type: [String, Number],
			default: "",
		},
		boxPadding: {
			type: String,
			default: "",
		},
		commonTitleColor: {
			type: String,
			default: "#2E2E33",
		},
		moreTitle: {
			type: [String, Number, Boolean],
			default: "",
		},
		moreTitleColor: {
			type: String,
			default: "#AFB7C7",
		},
		selectStatus: {
			type: Boolean,
			default: true,
		},
        showMoreIcon: {
            type: Boolean,
			default: true,
        }
	},
	methods: {
		tapMore: util.throttle(function () {
			this.$emit("moreCallBack")
		}),
	},
}
</script>
<style lang="scss" scoped>
.common_title_component {
	position: relative;
	justify-content: space-between;
	z-index: 2;
	.title_text {
		font-size: 32rpx;
		font-weight: 600;
		color: $black;
		position: relative;
		height: 44rpx;
		&.select_style {
			&::after {
				content: "";
				position: absolute;
				z-index: 1;
				background: $themeColor;
				width: 50rpx;
				height: 6rpx;
				left: 0;
				bottom: -8rpx;
				border-radius: 2rpx;
			}
		}
	}
	.more_box {
		height: 44rpx;
		line-height: 44rpx;
		.more_title {
			font-size: 24rpx;
		}
		image {
			margin-left: 8rpx;
			width: 16rpx;
			height: 16rpx;
		}
	}
}
</style>
